<template>
  <div class="box">
    <div class="left">
      <h1>历史订单</h1>
    </div>
    <div class="right">
      <OrderV
        v-for="item in list"
        :key="item._id"
        :order="item"
      />
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line import/no-cycle
import { getFoodList } from '@/api/food';
import OrderV from '@/views/order/OrderView.vue';

export default {
  components: {
    OrderV,
  },
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.localfood();
  },
  methods: {
    async localfood() {
      this.list = await getFoodList();
      console.log(this.list);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 900px;
  height: 100px;
  margin: 10px auto;
  display: flex;
}

.left {
  width: 200px;
  text-align: left;
  height: 100px;
}

.right {
  width: 700px;
  display: flex;
  flex-wrap: wrap;
  // height: 100px;
}
</style>
